import React, { useState, useRef, useEffect } from 'react';
import Masonry from 'react-masonry-css';
import Select from 'react-select';
import { Switch, Pagination } from 'antd';
import './index.css'
function H5material() {
    const images = [
        'https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20220129-013732-9c94.gif?x-oss-process=image/format,jpg/sharpen,120',
        'https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210831-162137-a423.gif?x-oss-process=image/format,jpg/sharpen,120',
        'https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210831-162137-a423.gif?x-oss-process=image/format,jpg/sharpen,120',
        // 更多图片URL
    ];
    const imagex = [
        'https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20220129-013732-9c94.gif?x-oss-process=image/format,jpg/sharpen,120',
        'https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210831-162137-a423.gif?x-oss-process=image/format,jpg/sharpen,120',
        'https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210831-162137-a423.gif?x-oss-process=image/format,jpg/sharpen,120',
        // 更多图片URL
    ];
    const [activeTab, setActiveTab] = useState(0);
    // Tab的内容
    const tabs = ['全部', '平面模版', '图片', '免抠元素', '视频', '视频模版'];
    //下拉菜单
    const options = [
        { value: 'red', label: 'Red', color: 'red' },
        { value: 'green', label: 'Green', color: 'green' },
        { value: 'blue', label: 'Blue', color: 'blue' },
        { value: 'yellow', label: 'Yellow', color: 'yellow' },
        { value: 'purple', label: 'Purple', color: 'purple' },
        { value: 'orange', label: 'Orange', color: 'orange' },
        { value: 'pink', label: 'Pink', color: 'pink' },
        { value: 'brown', label: 'Brown', color: 'brown' },
        { value: 'black', label: 'Black', color: 'black' },
        { value: 'gray', label: 'Gray', color: 'gray' },
    ];
    //格式
    const optionx = [
        { value: '插画', label: '插画' },
        { value: '合成', label: '合成' },
        { value: '排班', label: '排版' },
        { value: '3D', label: '3D' },
        { value: '奢华', label: '奢华' },
        { value: '商务', label: '商务' },
        { value: '时尚', label: '时尚' },
        { value: '实景', label: '实景' },
        { value: '科技', label: '科技' },
        { value: '复古', label: '复古' },
        { value: '现代', label: '现代' },
        { value: '潮流', label: '潮流' },
        { value: '酷炫', label: '酷炫' },
        { value: '趣味', label: '趣味' },
        { value: '可爱', label: '可爱' },
        { value: '卡通', label: '卡通' },
        { value: '文艺', label: '文艺' },
        { value: '清新', label: '清新' },
        { value: '温馨', label: '温馨' },
        { value: '促销', label: '促销' },
        { value: '喜庆', label: '喜庆' },
        { value: '政务', label: '政务' },
        { value: '中国风', label: '中国风' },
        { value: '酸性风', label: '酸性风' },
        { value: '简约', label: '简约' },
        { value: '浪漫风', label: '浪漫风' },
        { value: '扁平风', label: '扁平风' },
        { value: '孟菲斯', label: '孟菲斯' },
        { value: '励志', label: '励志' },
    ];
    //版式
    const optiony = [
        { value: '横版', label: '横版 ' },
        { value: '竖版', label: '竖版' },
        { value: '方形', label: '方形' },
        { value: '4:3', label: '4:3' },
        { value: '3:4', label: '3:4' },
    ];
    //图片翻页
    const [currentPage, setCurrentPage] = useState(0);
    const imageRef = useRef(null);
    const [isMouseIn, setIsMouseIn] = useState(false);
    const threshold = 0.3; // 翻页阈值，例如鼠标在图片左右30%的位置时触发翻页

    const handleMouseMove = (e) => {
        if (!imageRef.current) return;
        const rect = imageRef.current.getBoundingClientRect();
        const mouseX = e.clientX - rect.left;
        const imageWidth = rect.width;
        if (!isMouseIn) {
            setIsMouseIn(true);
        }
        if (mouseX / imageWidth < threshold) {
            // 鼠标在图片左侧
            if (currentPage > 0) {
                setCurrentPage(currentPage - 1);
            }
        } else if (mouseX / imageWidth > 1 - threshold) {
            // 鼠标在图片右侧
            if (currentPage < images.length - 1) {
                setCurrentPage(currentPage + 1);
            }
        }
    };

    const handleMouseLeave = () => {
        setIsMouseIn(false);
    };
    //图片上移动画

    return (
        <div>
            {/* 左侧Tab栏 */}
            <div style={{ width: "350px", padding: "10px" }}>
                <ul style={{ listStyleType: "none", padding: 0, display: "flex" }}>
                    {tabs.map((tab, index) => (
                        <li
                            key={index}
                            style={{
                                marginRight: "10px",
                            }}>
                            {tab}
                        </li>
                    ))}
                </ul>
            </div>

            {/* 右侧内容区 */}
            <div style={{ flexGrow: 1, padding: "10px" }}>
                <p>{tabs[activeTab].content}</p>
                <div style={{
                    display: 'flex',
                    justifyContent: 'wrap',
                }}>
                    <div style={{
                        display: 'flex',
                        padding: '10px',
                    }}>
                        <div style={{
                            padding: '10px',
                            marginRight: '10px',
                        }}>综合排序</div>
                        <div style={{
                            padding: '10px',
                            marginRight: '10px',
                        }}>最新上传</div>
                    </div>
                    <div style={{
                        display: 'flex',
                        marginLeft: '350px',
                    }}>
                        <div>
                            <Select
                                options={options}
                                getOptionLabel={(e) => (
                                    <div style={{ display: 'flex' }}>
                                        <div
                                            style={{
                                                width: 20,
                                                height: 20,
                                                backgroundColor: e.color,
                                                borderRadius: '50%',
                                                marginRight: 10,
                                            }}
                                        />
                                    </div>
                                )}
                            // components={{ SingleValue: customSingleValue, Option: customOption }}
                            />
                        </div>
                        <div>
                            <Select
                                options={optionx}
                                isClearable={true}  // 允许点击 X 号来清除选择
                                placeholder="格式"
                            />
                        </div>
                        <div>
                            <Select
                                options={optiony}
                                isClearable={true}  // 允许点击 X 号来清除选择
                                placeholder="版式"
                            />
                        </div>
                    </div>
                </div>
            </div>
            {/* 瀑布流 */}
            <div className='app'>
                <div className="masonry">
                    <div className="image-container" onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave}>
                        <img
                            ref={imageRef}
                            src={images[currentPage]}
                            alt={`Image ${currentPage + 1}`}
                            className="flip-image"
                        />
                    </div>
                    
                </div>
            </div>
            <div style={{ margin: '20px' }}>
                <Pagination defaultCurrent={1} total={500} align="center" />
            </div>
        </div>
    );
}

export default H5material;
